
// 测试页面，用来验证一些方法
<template >
    <div ref="container">
        <el-container >
            <el-header class="header-container">
                <div class="video-cat">
                    <div class="cat-title">地区</div>
                    <div class="cat-list">
                        <div @click="selectArea(item)" :class="isAreaActive===item?'cat-area-active':'cat-area'"  v-for="(item,index) in arealist" :key="index">{{item}}</div>
                    </div>

                    <div class="clearfix"></div>
                      <div class="cat-title">分类</div>
                      <div class="cat-list">
                          <div @click="selectType(item)" :class="isTypeActive===item?'cat-type-active':'cat-type'"  v-for="(item,index) in typelist" :key="index">{{item}}</div>
                      </div>

                </div>
            </el-header>
            <el-main class="main-container" >
                <div class="video-container">
                    <div class="mv-list-title">全部视频</div>

                    <ul class="infinite-list" >
                        <li v-for="(item,index) in mvlist" :key="index" class="mv-list">
                            <div @click="linkTo(item.id)" class="mv-list-coverimg">
                                <el-image class="coverimg" :src="item.cover"></el-image>
                                <el-image class="broadcast-btn" src=""></el-image>
                            </div>
                            <div class="name">{{item.name}}</div>
                            <div class="artists">
                                <div class="artist" v-for="(artistName,index) in item.artists" :key="index">{{artistName.name}}</div>
                            </div>

                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="loadmore" @click="loadMore">
                        <div v-if="!loading" class="loadmore-btn" >点击加载更多</div>
                        <div v-else class="loadmore-loading">加载中...</div>
                    </div>
                </div>

            </el-main>
            <!-- footer 底部留白 -->
        <div style="height: 100px;" class="footer"></div>
        </el-container>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 地区列表
      arealist: ['全部', '内地', '港台', '欧美', '日本', '韩国'],
      //   类型列表
      typelist: ['全部', '官方版', '原生', '现场版', '网易出品'],
      //   激活的是哪一个区域
      isAreaActive: '全部',
      //   激活的是哪一个type
      isTypeActive: '全部',
      //   请求获取 mv 的参数
      querymvinfo: {
        area: '',
        type: '',
        order: '',
        limit: 30,
        offset: 0
      },
      //   mv列表
      mvlist: [],

      pageno: 1,
      loading: false,
      lasttime: 0
    }
  },
  created () {
    this.getMvList()
  },
  computed: {

  },
  methods: {
    //   选择 区域
    selectArea (item) {
      this.isAreaActive = item
      console.log('点击了 区域 ：', this.isAreaActive)
      this.querymvinfo.area = this.isAreaActive
      this.getMvList('select')
    },
    //  选择 类型
    selectType (item) {
      this.isTypeActive = item
      console.log('点击了 type ：', this.isTypeActive)
      this.querymvinfo.type = this.isTypeActive
      this.getMvList('select')
    },
    // 获取 mv列表
    async getMvList (select) {
      this.querymvinfo.offset = (this.pageno - 1) * this.querymvinfo.limit
      const { data: res } = await this.$http.get('mv/all', { params: this.querymvinfo })
      if (res.code !== 200) return this.$message.error('获取音乐mv失败')
      //   如果是选择上方的分类，则mvlist重新赋值，否则push
      if (select === 'select') {
        this.mvlist = res.data
      } else {
        this.mvlist = this.mvlist.concat(res.data)
      }

      console.log('getMvList this.mvlist ：', this.mvlist)
      this.isInfiniteScroll = false
    },
    loadMore () {
      var now = new Date().getTime() // 每次触发事件获取当前时间
      if (now - this.lasttime > 1000) { // 若时间间隔大于了1000ms
        this.lasttime = now // 执行代码，并重新计时
        // 执行请求下一页操作
        this.loading = true
        this.pageno += 1
        console.log('loadMore:', this.pageno)
        this.getMvList()
        setTimeout(() => {
          this.loading = false
        }, 1000)
      }
    },
    linkTo (mvid) {
      console.log('跳转详情页', mvid)
      this.$router.push({ path: `/video/videodetail/${mvid}` })
    },

    // 滚动条
    handleScroll () {
      this.scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop
      // 滚动条高度
      //   console.log('this.scrollTop:', this.scrollTop)
      //   窗口高度
      //   console.log('window.innerHeight:', window.innerHeight)
      //   内容高度
      //   console.log('this.container:', this.$refs.container.offsetHeight)

      if (this.scrollTop + window.innerHeight >= this.$refs.container.offsetHeight) {
        this.loadMore()
      }
    }

  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
    .video-cat{
        /* border: 1px solid red; */
        margin-top: 5px;
    }
    .cat-title{
        width: 10%;
        margin: 5px auto;
        /* 文字居中 */
        display: flex;
        justify-content: center;
        color: #999;
    }
    .cat-list{
        /* 实现元素水平居中 */
        display: flex;
        justify-content: center;
    }
/* 区域 */
.cat-area{
    margin-left: 5px;
    font-size: 14px;
    color: #333;
    padding: 5px 8px;
    border-radius: 13px;
}
.cat-area:hover{
    cursor: pointer;
}
.cat-area-active{
    margin-left: 5px;
    font-size: 14px;
    padding: 5px 8px;
    border-radius: 13px;
    color: white;
    background: #ff4757;
}

.cat-type{
   margin-left: 5px;
    font-size: 14px;
    color: #333;
    padding: 5px 8px;
    border-radius: 13px;
}
.cat-type:hover{
    cursor: pointer;
}
.cat-type-active{
    margin-left: 5px;
    font-size: 14px;
    padding: 5px 8px;
    border-radius: 13px;
    color: white;
    background: #ff4757;
}

/* 歌曲列表部分 */
.video-container{
     /* border: 2px solid black; */
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
}
.mv-list-title{
    margin: 5px 10px;
    color: #333;
    font-size: 28px;
    font-weight: 700;
}
.mv{
    width: 100%;
}
.mv-list{
    /* 去除黑点 */
    list-style: none;
    margin-top: 10px;
    width: calc(16.66% - 20px);
    float: left;
    margin-left: 10px;
}
/* 封面图 */
.mv-list-coverimg{
    height: 0;
    padding-top: 56%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.coverimg{
    position: absolute;
    top: 0;
    border-radius: 3px;
    /* 延时 */
    transform: scale(1);
     transition: all 1s ease 0s;

}
/* 鼠标悬浮时，图片拉近效果 */
.mv-list-coverimg:hover .coverimg{
    /* 悬浮时拉近图片 */
    transform: scale(1.1);
    /* 延时 */
    transition: all 1s ease 0s;
}
.mv-list-coverimg:hover .broadcast-btn{
    transform: translate(-50%,-50%) scaleX(1);
    /* 延时 */
    transition: all 0.5s ease 0s;
    opacity: 1;
    width: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
}
/* 播放按钮图标 */
.broadcast-btn{
    opacity: 0;
     /* 延时 */
     transform: translate(-50%,-50%);
    transition: all 0.5s ease 0s;
    width: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
}
/* 歌名 */
.name{
    text-decoration: none;
    font-size: 15px;
    color: #333;
    font-weight: 600;
    /* 控制文本溢出 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 作者 */
.artists{
    /* 如果文字出现韩文时，会比其他文字高度高，导致列表元素高度不一致，出现空白的情况，所以要固定高度 */
    height: 16.8px;
    padding-right: 4px;
    text-decoration: none;
    font-size: 13px;
    color: #666;
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.artist{
    margin-right: 5px;
}
/* 加载更多按钮 */
.loadmore{
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    background: #747d8c;
    border-radius: 20px;
    height: 30px;
    line-height: 30px;
    color: rgb(243, 237, 237);
    cursor: pointer;
    text-align:center
}
.loadmore-btn{
    width: 20%;
    margin: 0 auto;
}
.loadmore-loading{
    width: 10%;
    margin: 0 auto;
}

    /* 清除浮动 */
    .clearfix{
        clear: both;
    }
.header-container{
    /* border: 1px solid red; */
    height: 140px !important;
}
.main-container{
    /* border: 1px solid blue; */
}
</style>
